<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <!--<meta http-equiv="X-UA-Compatible" content="chrome=1">-->
    <meta http-equiv="X-UA-Compatible" content="高德地图">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
        body,html,#container{
            height: 100%;
            margin: 0px
        }
        .panel {
            background-color: #ddf;
            color: #333;
            border: 1px solid silver;
            box-shadow: 3px 4px 3px 0px silver;
            position: absolute;
            top: 10px;
            right: 40px;
            border-radius: 5px;
            overflow: hidden;
            line-height: 20px;
        }
        #input{
            width: 250px;
            height: 25px;
            border: 0;
        }
    </style>
    <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=f2e4ebde8313e416f6c2f89090c98e20&plugin=AMap.Autocomplete"></script>
    <script type="text/javascript" src="http://cache.amap.com/lbs/static/addToolbar.js"></script>
    <!--<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.0&key=f2e4ebde8313e416f6c2f89090c98e20"></script>-->
    <script type="text/javascript" src="https://webapi.amap.com/demos/js/liteToolbar.js"></script>
    <title>高德地图</title>

</head>
<body>
<div id="container" style="width:98%;height:498px;border:1px solid gray" tabindex="0"></div>
<div class ='panel'>
    <input id="input" name="where"   placeholder="点击地图显示地址/输入地址显示位置"  >
    当前经纬度：<input id="lonlat" name="lonlat"     type="text"  style="width: 27%" >
    <div id = 'message'></div>
</div>

<script type="text/javascript">
    var map = new AMap.Map('container',{
        resizeEnable: true,
        zoom: 11,
        center: [108.906443, 34.239991]
    });
    //输入提示
    var auto = new AMap.Autocomplete({
        input: "input"
    });

    AMap.plugin('AMap.Geocoder',function(){
        var geocoder = new AMap.Geocoder({
//            city: "010"//城市，默认：“全国”
        });
        var marker = new AMap.Marker({
            map:map,
            bubble:true
        })
        var input = document.getElementById('input');
        var message = document.getElementById('message');
        var lonlat = document.getElementById('lonlat');
        map.on('click',function(e){
            marker.setPosition(e.lnglat);
            geocoder.getAddress(e.lnglat,function(status,result){
                if(status=='complete'){
                    input.value = result.regeocode.formattedAddress;
                    lonlat.value = e.lnglat.lng + ',' + e.lnglat.lat;
                    // 给主页面的inout 赋值
                    window.parent.document.getElementById("latitude").value=e.lnglat.lng;
                    window.parent.document.getElementById("longitude").value=e.lnglat.lat;
//                    window.parent.document.getElementById("address").value=input.value;
                    window.parent.document.getElementById("address").setAttribute("value",input.value);

                    message.innerHTML = ''
                }else{
                    message.innerHTML = '无法获取地址'
                }
            })
        })

        input.onchange = function(e){
            var address = input.value;
            if(address == ''){
                lonlat.value = '';
            }
            geocoder.getLocation(address,function(status,result){
                if(status=='complete'&&result.geocodes.length){
                    marker.setPosition(result.geocodes[0].location);
                    map.setCenter(marker.getPosition());
                    message.innerHTML = '';

                    lonlat.value = result.geocodes[0].location.lng + ',' + result.geocodes[0].location.lat;
                    // 给主页面的inout 赋值
                    window.parent.document.getElementById("latitude").value=result.geocodes[0].location.lng;
                    window.parent.document.getElementById("longitude").value=result.geocodes[0].location.lat;
//                    window.parent.document.getElementById("address").value=address;
                    window.parent.document.getElementById("address").setAttribute("value",address);

                }else{
                    message.innerHTML = '无法获取位置'
                }
            })
        }

    });



</script>


</body>
</html>